<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- v -->
    <div id="app">
      案例： 面积的计算  <hr>
      <label for="">长</label> <input v-model="len" /> * <label for="">宽</label> <input v-model="wid"/> = <input v-model="area"/> 面积
    </div>
  </body>
  <script src="../../lib/vue.global.js"></script>
  <script>
    // vm
    /* 
    理解： 正常来说 逻辑我们最好放到VM中，但是现在上面的案例，把逻辑【复杂】放到了v,这有点不太合适【不符合关注点分离】，所以我们得把逻辑放到vm中
    问题： 怎么处理？
    解决： vue提供了一个解决方式：  计算属性  computed  表示对数据的格式化操作
  
  */
    const vm = Vue.createApp({
      data () {
        return {
          len: 1,
          wid: 1
        }
      },
      computed: {
        area () { // 当计算属性中的area是一个方法时，这个计算属性时只读的
          return this.len * this.wid 
        }
      }
    }).mount("#app");
  </script>
</html>
